<template>
  <div class="body">
    <div class="main-box">
      <div :class="['container', 'container-register', { 'is-txl': isLogin }]">
        <form @submit.prevent="register">
          <h2 class="title">注册</h2>
          <input class="form__input" type="text" placeholder="请输入姓名" v-model="registerForm.name" />
          <input class="form__input" type="text" placeholder="请输入学号" v-model="registerForm.studentId" />

          <!-- <el-input class="form__input" type="text" placeholder="请输入学号" v-model="registerForm.studentId" show-word-limit
            minlength="8" maxlength="8"></el-input> -->

          <input class="form__input" type="email" placeholder="请输入邮箱" v-model="registerForm.email" />
          <input class="form__input" type="password" placeholder="请输入密码" v-model="registerForm.password" />
          <input class="form__input" type="text" placeholder="请输入验证码" v-model="registerForm.verificationCode" />
          <button class="captcha-button" type="button" @click="getCaptcha" :disabled="!canGetCaptcha">
            {{ canGetCaptcha ? '获取验证码' : '重新获取(' + timeLeft + '秒)' }}
          </button>
          <div class="form__button" @click="register">立即注册</div>
        </form>
      </div>

      <div :class="['container', 'container-login', { 'is-txl is-z200': isLogin }]">
        <div>
          <h1 @click="goToHomepage">疯帽子家社团联盟</h1>
          <link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
          <h3>(↑点击可继续使用游客模式~)</h3>
        </div>
        <div class="form-container">
          <form @submit.prevent="login">
            <h2 class="title">登录</h2>
            <input class="form__input" type="text" placeholder="学号/邮箱" v-model="loginForm.identifier" />
            <input class="form__input" type="password" placeholder="请输入密码" v-model="loginForm.password" />
            <div class="form__button" @click="login">立即登录</div>
          </form>
        </div>
      </div>

      <div :class="['switch', { 'login': isLogin }]">
        <div class="switch__circle"></div>
        <div class="switch__circle switch__circle_top"></div>
        <div class="switch__container">
          <h2>{{ isLogin ? '您好 !' : '欢迎回来 !' }}</h2>
          <p>
            {{
            isLogin
            ? '如果您还没有账号，请点击下方立即注册按钮进行账号注册'
            : '如果您已经注册过账号，请点击下方立即登录按钮进行登录'
            }}
          </p>
          <div class="form__button" @click="isLogin = !isLogin">
            {{ isLogin ? '立即注册' : '立即登录' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  name: 'Login',
  data() {
    return {
      isLogin: true,
      loginForm: {
        identifier: '',
        password: '',
      },
      registerForm: {
        name: '',
        studentId: '',
        email: '',
        password: '',
        verificationCode: '',
      },
      canGetCaptcha: true,
      timeLeft: 60, // 初始倒计时时间，60秒
    };
  },
  methods: {
    goToHomepage() {
      this.$router.push({ name: "Homepage" });
    },
    login() {
      const loginData = {
        identifier: this.loginForm.identifier,
        password: this.loginForm.password,
      };

      // 使用 axios 发送 POST 请求到服务器
      axios.post('/user/login', loginData)
        .then((response) => {
          const data = response.data;
          if (data.code === 0) {
            console.log('登录成功:', data);

            ElMessage({
              message: '登录成功',
              showClose:true,
              type: 'success',
            })
            // 保存 token
            sessionStorage.setItem('token', data.data);
            sessionStorage.setItem('studentId',loginData.identifier)
            axios.get("/user/getUserType").then(response => {
              if(response.data.data==="系统管理员"){
                this.$router.push('/club-audit');
              }
              else{
                this.$router.push('/homepage');
              }
            }).catch(error => {
              console.error("Error:", error);
            });
          } else {
            ElMessage({
              message: '登录失败，请检查输入后重试',
              showClose:true,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          console.error('登录失败:', error);

          ElMessage({
            message: '登录失败，请重试',
            showClose:true,
            type: 'error',
          })
        });
    },

    register() {
      if (!this.registerForm.name || !this.registerForm.studentId || !this.registerForm.email || !this.registerForm.password || !this.registerForm.verificationCode) {
        ElMessage({
          message: '请填写完整信息',
          showClose:true,
          type: 'error',
        })
        return;
      }

      // 发送注册请求
      axios.post('/user/register', this.registerForm)
        .then((response) => {
          const data = response.data;
          if (data.code === 0) {
            console.log('注册成功:', data);

            ElMessage({
              message: '注册成功，请登录',
              showClose:true,
              type: 'success',
            })

            this.isLogin = true;
          } else {

            ElMessage({
              message: '注册失败，请检查输入后重试',
              showClose:true,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          console.error('注册失败:', error);

          ElMessage({
            message: '注册失败，请检查输入后重试',
            showClose:true,
            type: 'error',
          })
        });
    },

    getCaptcha() {
      const email = this.registerForm.email;

      if (!email) {

        ElMessage({
          message: '请输入邮箱地址',
          showClose:true,
          type: 'error',
        })

        return;
      }

      // 发送请求到后端API获取验证码
      axios.post('/user/sendCode', { email })
        .then((response) => {
          const data = response.data;
          if (data.code === 0) {
            console.log('Captcha sent:', data);
            this.startCaptchaCountdown();

            ElMessage({
              message: '验证码发送成功，请查收邮件',
              showClose:true,
              type: 'success',
            })

          } else {

            ElMessage({
              message: '验证码发送失败，请稍后重试',
              showClose:true,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          console.error('Error sending captcha:', error);
          ElMessage({
              message: '验证码发送失败，请稍后重试',
              showClose:true,
              type: 'error',
            })
        });
    },

    startCaptchaCountdown() {
      this.canGetCaptcha = false;
      this.timeLeft = 60; // 重置倒计时时间

      const intervalId = setInterval(() => {
        this.timeLeft -= 1;

        if (this.timeLeft <= 0) {
          this.canGetCaptcha = true;
          clearInterval(intervalId);
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
/* 标题弹出动画 */
@keyframes titlePop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes titlePop {
      0% {
        transform: scale(0.8);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

.body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  background-image: url("@/assets/images/background.jpg");
  color: #5D4037; // 修改文字颜色为深棕色

}


.main-box {
  position: relative;
  width: 1000px;
  min-width: 1000px;
  min-height: 600px;
  height: 600px;
  padding: 25px;
  background-color: #FEF9EF;
  box-shadow: 1px 1px 100px 10PX #FEF9EF;
  border-radius: 12px;
  overflow: hidden;

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 0;
    width: 500px;
    height: 100%;
    padding: 25px;
    background-color: #FEF9EF;
    transition: all 1.25s;
    display: flex;
 
  /* 标题样式及动画 */
h1 {
  font-family: 'ZCOOL KuaiLe', cursive;
  font-size: 3.7rem;
  color: #5d4037;
  margin-bottom: 40px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  animation: titlePop 1s ease-out, glow 2s ease-in-out infinite alternate;
  position: relative;
  font-weight: 300; /* 尝试降低字体粗细 */
}
h1:hover {
      transform: scale(1.1);
      color: #8b4513;
      text-decoration: underline;
    }

h1::before {
  content: "🎩";
  position: absolute;
  top: -20px;
  right: -30px;
  font-size: 1.5rem;
  animation: spin 2s linear infinite;
}

h3{
  font-family: 'ZCOOL KuaiLe', cursive;
  font-weight: 300;
}


.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  /* Adjust as needed */
  margin-top: -35px;
  /* Adjust this value to move the form up or down */
}

  


    form {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      color: #5D4037;

      .form__icon {
        object-fit: contain;
        width: 30px;
        margin: 0 5px;
        opacity: .5;
        transition: .15s;

        &:hover {
          opacity: 1;
          transition: .15s;
          cursor: pointer;

        }
      }

      .title {
        font-size: 34px;
        font-weight: 400;
        line-height: 3;
        color: #181818;
        font-family: 'ZCOOL KuaiLe', cursive;
      }

      .text {
        margin-top: 30px;
        margin-bottom: 12px;
      }

      .form__input {
        width: 350px;
        height: 40px;
        margin: 4px 0;
        padding-left: 25px;
        font-size: 13px;
        letter-spacing: 0.15px;
        border: none;
        outline: none;
        background-color: #FEF9EF;
        transition: 0.25s ease;
        border-radius: 8px;
        box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;

        &::placeholder {
          color: #a0a5a8;
        }
      }

    }
  }

  .container-register {
    z-index: 100;
    left: calc(100% - 550px);
  }

  .container-login {
    left: calc(100% - 550px);
    z-index: 0;
  }

  .is-txl {
    left: 0;
    transition: 1.25s;
    transform-origin: right;
  }

  .is-z200 {
    z-index: 200;
    transition: 1.25s;
  }

  .switch {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 400px;
    padding: 50px;
    z-index: 200;
    transition: 1.25s;
    background-color: #FEF9EF;
    overflow: hidden;
    box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;
    color: #a0a5a8;

    .switch__circle {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background-color: #FEF9EF;
      box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;
      bottom: -60%;
      left: -60%;
      transition: 1.25s;
    }

    .switch__circle_top {
      top: -30%;
      left: 60%;
      width: 300px;
      height: 300px;
    }

    .switch__container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: absolute;
      width: 400px;
      padding: 50px 55px;
      transition: 1.25s;
      font-family: 'ZCOOL KuaiLe', cursive;
      font-weight: 300;

      h2 {
        font-size: 34px;
        font-weight: 700;
        line-height: 3;
        color: #181818;
      }

      p {
        font-size: 14px;
        letter-spacing: 0.25px;
        text-align: center;
        line-height: 1.6;
      }
    }
  }

  .login {
    left: calc(100% - 500px);

    .switch__circle {
      left: 0;
    }
  }

  .form__button {
    width: 180px;
    height: 50px;
    border-radius: 25px;
    margin-top: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    letter-spacing: 2px;
    background-color: #FFC107;
    color: #FFFFFF;
    box-shadow: 8px 8px 16px #D7CCC8, -8px -8px 16px #FFFFEE;
    cursor: pointer;
    font-family: 'ZCOOL KuaiLe', cursive;

    &:hover {
      box-shadow: 2px 2px 3px 0 rgba(255, 193, 7, 0.5),
      -2px -2px 3px 0 rgba(255, 193, 7, 0.5),
      inset -2px -2px 3px 0 rgba(255, 255, 255, 20%),
      inset 2px 2px 3px 0 rgba(0, 0, 0, 30%);
    }


  }

  .captcha-button {
      padding: 10px 20px; /* 内边距 */
      font-size: 16px; /* 字体大小 */
      color: #ffffff; /* 文字颜色 */
      background: linear-gradient(45deg, #FFA000, #FFC107); // 修改按钮颜色为橙色系渐变
      box-shadow: 0 4px 15px 0 rgba(255, 160, 0, 0.75);
      border: none; /* 无边框 */
      border-radius: 8px; /* 圆角 */
      cursor: pointer; /* 鼠标悬停时显示手形图标 */
      transition: all 0.3s ease; /* 平滑过渡效果 */
      outline: none; /* 点击时不显示轮廓 */
      font-family: 'ZCOOL KuaiLe', cursive;
}

.captcha-button:hover {
  transform: translateY(-2px); /* 鼠标悬停时上移 */
  box-shadow: 0 6px 20px 0 rgba(106, 17, 203, 0.9); /* 加深阴影 */
}

.captcha-button:active {
  background: #FF9800; /* 按下时改变背景色 */
  box-shadow: 0 2px 10px 0 rgba(106, 17, 203, 0.5); /* 减轻阴影 */
  transform: translateY(0); /* 恢复原位 */
}

.captcha-button[disabled] {
  opacity: 0.5; /* 禁用时半透明 */
  cursor: not-allowed; /* 禁用时鼠标显示禁止图标 */
}
}
</style>
